<template>
  <el-dialog title="选择订餐人员" :visible="visible" width="650px" @close="handleClose">
    <el-input v-model="searchName" placeholder="请输入姓名搜索" style="margin-bottom: 15px" @input="filterEmpList">
      <el-button slot="append" icon="el-icon-search" @click="filterEmpList"></el-button>
    </el-input>

    <el-transfer
      v-model="localSelected"
      :data="filteredEmpList"
      :titles="['可选人员', '已选人员']"
      filterable
      :filter-method="filterMethod"
      @change="handleChange"
    >
      <template #button-text="{ direction }">
        <span v-if="direction === 'right'">增加</span>
        <span v-else>删除</span>
      </template>
    </el-transfer>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PersonSelect',
  props: {
    visible: Boolean,
    deptno: Number,
    selectedPersons: Array,
  },
  data() {
    return {
      searchName: '',
      empList: [],
      localSelected: [],
      filteredEmpList: [],
    };
  },
  watch: {
    selectedPersons: {
      immediate: true,
      handler(newVal) {
        this.localSelected = [...(newVal || [])]; 
      },
    },
    visible(newVal) {
      if (newVal) {
        this.localSelected = [...(this.selectedPersons || [])];
        this.getEmpList();
      }
    }
  },
  methods: {
    getEmpList() {
      this.$http.post("/getEmps", { deptno: this.deptno }).then(res => {
        const empData = res.data.data || [];
        this.empList = empData.map(emp => ({
          key: emp.ename,
          label: emp.ename,
          disabled: false
        }));
        this.filterEmpList();
      });
    },

    filterEmpList() {
      if (!this.searchName) {
      //创建新数组，把原有内容拷贝进去
        this.filteredEmpList = [...this.empList];
      } else {
        //根据用户输入数据进行筛选
        this.filteredEmpList = this.empList.filter(item => 
          item.label.toLowerCase().includes(this.searchName.toLowerCase())
        );
      }
    },

    filterMethod(query, item) {
      return item.label.toLowerCase().includes(query.toLowerCase());
    },

    handleChange(value) {
      this.localSelected = value;
    },

    handleConfirm() {
      this.$emit('confirm', this.localSelected);
      this.handleClose();
    },

    handleClose() {
      this.searchName = '';
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
/* 调整两个面板之间的间距 */
::v-deep .el-transfer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

::v-deep .el-transfer-panel {
  width: 280px !important;
  background: #fff !important;
}

/* 减小复选框和文字之间的间距 */
::v-deep .el-transfer-panel__list .el-checkbox {
  margin-right: 4px !important;
}

::v-deep .el-transfer-panel__item {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 8px 12px !important;
}

::v-deep .el-transfer-panel__item:hover {
  background-color: #f5f7fa !important;
}

::v-deep .el-transfer-panel__list {
  height: 300px !important;
}

::v-deep .el-transfer-panel__body {
  height: 300px !important;
}

::v-deep .el-transfer-panel {
  border: 1px solid #DCDFE6 !important;
  box-shadow: none !important;
}

/* 调整操作按钮的位置 */
::v-deep .el-transfer__buttons {
  padding: 0 10px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>